Tailwind CSSのplugins
JSで独自のルールを定義できる
あるいは、外部で配布されているpluginsを使用できる
docs
読み込む ref
code:tailwind.config.js
module.exports = {
plugins: [
require('./styles/stack.js'),
require('hogehoge')
],
};
自分で書く例
Tailwind CSSのPluginを作る
Pluginの静的と動的
静的に定義する方法は、CSSを書いて@tailwindに対して拡張を行うとほぼ同じmrsekut.icon
なんで存在してるんだろうな
JSで書くかCSSで書くかぐらいの違いしか無い
動的に生成することでJSで書く恩恵を受けられる
hoge-0, hoge-1, .. のような機械的なルールをプログラムで生成できる
#WIP
公式の有名pluginみたいなのがあるのね
@tailwindcss/typography
https://tailwindcss.com/docs/typography-plugin
@tailwindcss/forms
form系のスタイル
https://github.com/tailwindlabs/tailwindcss-forms
@tailwindcss/line-clamp
https://github.com/tailwindlabs/tailwindcss-line-clamp
わざわざ入れなくても元からTailwindCSS: line-clamp使えるなmrsekut.icon
@tailwindcss/aspect-ratio
https://github.com/tailwindlabs/tailwindcss-aspect-ratio